<template>
  <div class="terminal-overdue-detail-container">
    <t-card class="detail-card">
      <div class="detail-header">
        <h2>超期订单详情</h2>
      </div>

      <div class="detail-content">
        <div class="detail-section">
          <div class="detail-row">
            <div class="detail-label">所属地区：</div>
            <div class="detail-value">{{ detailData.region || '重庆' }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">分销商名称：</div>
            <div class="detail-value">{{ detailData.distributorName || '重庆分销商黄先生' }}</div>
          </div>
        </div>

        <div class="divider"></div>

        <div class="detail-section">
          <div class="detail-row">
            <div class="detail-label">销售地市：</div>
            <div class="detail-value">{{ detailData.salesCity || '重庆永川双石油库' }}</div>
          </div>
        </div>

        <div class="divider"></div>

        <div class="detail-section">
          <div class="detail-row">
            <div class="detail-label">终端账户卡号：</div>
            <div class="detail-value">{{ detailData.cardNo || '167000000000' }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">超期时间：</div>
            <div class="detail-value">{{ detailData.overdueTime || '2025-03-24' }}</div>
          </div>
        </div>

        <div class="divider"></div>

        <div class="detail-section">
          <div class="detail-row">
            <div class="detail-label">油品名称：</div>
            <div class="detail-value">{{ detailData.oilProduct || '92号车用汽油' }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">单价金额：</div>
            <div class="detail-value">{{ detailData.unitPrice || '6350' }}</div>
          </div>
        </div>

        <div class="divider"></div>

        <div class="detail-section">
          <div class="detail-row">
            <div class="detail-label">申请数量：</div>
            <div class="detail-value">{{ detailData.applyAmount || '19000.000KG' }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">申请时间：</div>
            <div class="detail-value">{{ detailData.applyTime || '2025-03-24 18:00:00' }}</div>
          </div>
        </div>

        <div class="divider"></div>

        <div class="detail-section">
          <div class="detail-row">
            <div class="detail-label">采购时间：</div>
            <div class="detail-value">{{ detailData.purchaseTimeRange || '2024-03-24 18:00:00 至 2025-03-24 18:00:00' }}
            </div>
          </div>
        </div>

        <div class="status-section">
          <div class="status-box">
            <div class="status-content">
              订单状态：{{ detailData.status || '已超期' }}
            </div>
          </div>
        </div>

        <div class="divider"></div>

        <div class="detail-section">
          <div class="detail-row">
            <div class="detail-label">解封人员：</div>
            <div class="detail-value">{{ detailData.unsealer || '' }}</div>
          </div>
          <div class="detail-row">
            <div class="detail-label">解封时间：</div>
            <div class="detail-value">{{ detailData.unsealTime || '' }}</div>
          </div>
        </div>

        <div class="divider"></div>

        <div class="detail-section">
          <div class="detail-row">
            <div class="detail-label">新超期时间：</div>
            <div class="detail-value">{{ detailData.newOverdueTimeRange || '2024-03-24 18:00:00 至 2025-03-24 18:00:00'
            }}</div>
          </div>
        </div>
      </div>

      <div class="action-buttons">
        <t-button theme="primary" variant="base" class="btn-unseal" @click="handleUnseal">解封</t-button>
      </div>
    </t-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';

const router = useRouter();
const route = useRoute();

interface DetailData {
  id?: string;
  region?: string;
  distributorName?: string;
  salesCity?: string;
  cardNo?: string;
  overdueTime?: string;
  oilProduct?: string;
  unitPrice?: string;
  applyAmount?: string;
  applyTime?: string;
  purchaseTimeRange?: string;
  status?: string;
  unsealer?: string;
  unsealTime?: string;
  newOverdueTimeRange?: string;
}

const detailData = reactive<DetailData>({});

// 获取详情数据
const fetchDetailData = () => {
  const id = route.params.id;
  const cardNo = route.query.cardNo as string;
  const status = route.query.status as string;
  const oilNo = route.query.oilNo as string;
  const overdueAmount = route.query.overdueAmount as string;
  const overdueTime = route.query.overdueTime as string;

  // 从路由参数获取基本数据
  detailData.status = status || '已超期';
  detailData.cardNo = cardNo || '167000000000';
  detailData.oilProduct = oilNo || '92号车用汽油';
  detailData.applyAmount = overdueAmount || '19000.000KG';
  detailData.overdueTime = overdueTime || '2025-03-24';

  // 这里应该是接口调用获取详情，这里使用模拟数据
  detailData.id = id as string;
  detailData.region = '重庆';
  detailData.distributorName = '重庆分销商黄先生';
  detailData.salesCity = '重庆永川双石油库';
  detailData.unitPrice = '6350';
  detailData.applyTime = '2025-03-24 18:00:00';
  detailData.purchaseTimeRange = '2024-03-24 18:00:00 至 2025-03-24 18:00:00';
  detailData.newOverdueTimeRange = '2024-03-24 18:00:00 至 2025-03-24 18:00:00';
};

// 解封操作
const handleUnseal = () => {
  MessagePlugin.success('解封操作已成功');
  setTimeout(() => {
    router.push('/terminal/overdue');
  }, 1500);
};

onMounted(() => {
  fetchDetailData();
});
</script>

<style lang="less" scoped>
.terminal-overdue-detail-container {
  width: 100%;
  padding: 16px;
  background-color: #f5f5f5;

  .detail-card {
    background-color: #fff;
    border-radius: 4px;

    .detail-header {
      padding: 16px 0;
      border-bottom: 1px solid #eee;

      h2 {
        font-size: 18px;
        font-weight: 500;
        color: #333;
        margin: 0;
      }
    }

    .detail-content {
      padding: 20px 0;

      .detail-section {
        padding: 12px 0;

        .detail-row {
          display: flex;
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }

          .detail-label {
            width: 140px;
            color: #666;
            text-align: right;
            margin-right: 8px;
          }

          .detail-value {
            flex: 1;
            color: #333;
          }
        }
      }

      .divider {
        height: 1px;
        background-color: #eee;
      }

      .status-section {
        padding: 20px 0;

        .status-box {
          background-color: #f9f9f9;
          padding: 16px;
          border-radius: 4px;

          .status-content {
            font-weight: 500;
            color: #e34d59;
          }
        }
      }
    }

    .action-buttons {
      display: flex;
      justify-content: flex-end;
      padding: 20px 0;
      border-top: 1px solid #eee;
    }
  }
}
</style>